import React from 'react';
import { Layout, Typography, Card } from 'antd';
import { FloatButton } from 'antd';
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
const { Content } = Layout;
const { Title, Text } = Typography;

const FloatingButtonPage: React.FC = () => {
  return (
    <Content>
      <Card>
        <Title level={2}>悬浮按钮</Title>
        <Text code>antd/lib/float-button</Text>
        <div style={{ marginTop: 20 }}>
          {/* 增加页面高度，使悬浮按钮可见 */}
          <div style={{ height: '1000px' }} />
          <FloatButton.Group shape="circle" style={{ insetInlineEnd: 24, zIndex: 1000 }}>
            <FloatButton icon={<QuestionCircleOutlined />} />
            <FloatButton.BackTop visibilityHeight={0} />
          </FloatButton.Group>
          <FloatButton.Group shape="square" style={{ insetInlineEnd: 94, zIndex: 1000 }}>
            <FloatButton icon={<QuestionCircleOutlined />} />
            <FloatButton icon={<SyncOutlined />} />
            <FloatButton.BackTop visibilityHeight={0} />
          </FloatButton.Group>
        </div>
      </Card>
    </Content>
  );
};

export default FloatingButtonPage;